Intro

Bézier curve editor

A 100% toddle-native editor for creating Bézier curves. Useful for creating timing functions to use in toddle or in standard CSS.

Demo

Components

  • cubic-bezier-editor

    Attributes

    precisionHow many decimals to work with. Default is 2.
    valueA 4 dimensional vector/array for the bezier curve. Default is a linear curve: [0, 0, 1, 1]
    hide-labelHide the label in the top. that shows the current value.
    hide-presetsHide the preset selection.
    presetsOverride the default preset with more options. Presets are sent as an object, where the key is the name of each preset and their value is a 4-dimensional array. Default is:

    {
       "linear":[
          0,
          0,
          1,
          1
       ],
       "ease":[
          0.25,
          0.1,
          0.25,
          1
       ],
       "ease-in":[
          0.42,
          0,
          1,
          1
       ],
       "ease-out":[
          0,
          0,
          0.58,
          1
       ],
       "ease-in-out":[
          0.42,
          0,
          0.58,
          1
       ]
    }

    Events

    changeCalled each time the internal value have changed. Output is a 4 dimensional vector.
    blurCalled each time the internal value has settled on a value. Usually when a handle is dropped or a preset is selected.

  • cubic-bezier-preview

    Attributes

    ghostsHow many ghosts to show
    timeThe current time to render at. Should be a number between 0..1
    valueA 4 dimensional vector/array for the bezier curve. Default is a linear curve: [0, 0, 1, 1]

Style variables

--cubic-bezier-editor--primary-colorThe primary line's color
--cubic-bezier-editor--secondary-colorThe helper lines' color
--cubic-bezier-editor--preset-backgroundBackground for the presets